<template>
  <div class="VonSelect">
    <div class="label" v-if="label">{{label}}</div>
    <span class="horizontalLabel" v-if="horizontalLabel">{{horizontalLabel}}</span>
    <el-select :placeholder="placeholder" :style="customStyle" v-bind="$attrs" v-on="$listeners" size="small" clearable :multiple="isMultiple" :collapse-tags="isMultiple">
      <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "VonSelect",
  props: {
    options: {
      type: Array,
      default() {
        return [{ name: "全部", id: "all" }];
      }
    },
    horizontalLabel: {
      type: String,
      default: ""
    },
    isMultiple: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "300px"
    },
    height: {
      type: String,
      default: "60px"
    },
    label: {
      type: String,
      default: ""
    }
  },
  computed: {
    customStyle() {
      let styleObj = {};
      styleObj.width = this.width;
      styleObj.height = this.height;
      styleObj.lineHeight = this.height;
      return styleObj;
    }
  }
};
</script>

<style  lang="scss">
.VonSelect {
  margin: 0 10px;
  .horizontalLabel{
    color: white;
    font-size: 16px;
  }
  .label {
    color: white;
    font-size: 16px;
  }
  .el-input__inner {
    background: transparent;
    color: white;
  }
}
</style>
